<template>
  <div class="upload-body">
    <el-input
      id="inputor"
      class="communityCenter-post-input"
      ref="promptsInput"
      type="textarea"
      autosize
      v-model="formData.comment_content"
      placeholder="此时此刻想说~"
      :class="{ 'communityCenter-post-input-comment': !isPop }"
    ></el-input>

    <div class="reboundmsg-bottom f-j-sb-a-c">
      <div class="attachment-box f-a-c">
        <div class="emoji-box" v-ClickOutside="() => (showEmoji = false)">
          <svg-icon
            class="svg-icon"
            name="icon-bq"
            @click.stop="showEmoji = !showEmoji"
          ></svg-icon>

          <!-- 表情包弹框 -->
          <div class="emoji-list-box" v-show="showEmoji">
            <div class="emoji-list flex">
              <img
                :src="item.emoji"
                alt=""
                v-for="(item, index) in emojiList"
                :key="index"
                @click.stop="emojiClick(item)"
              />
            </div>
          </div>
        </div>

        <div class="upload-img-box">
          <upload
            ref="uploadRef"
            @sucess="uploadsucess"
            @fileQueued="fileQueued"
            :multiple="false"
            :returnFile="true"
          >
            <svg-icon class="svg-icon" name="icon-tu-1"></svg-icon>
          </upload>
        </div>
      </div>

      <!-- 确定按钮 -->
      <span class="dialog-footer">
        <!-- <div class="confirm-btn f-j-a-c" @click="confirm">确定</div> -->
        <el-button class="confirm-btn f-j-a-c" @click="confirm" :loading="sendLoading"
          >确定</el-button
        >
      </span>
    </div>

    <!-- 上传的聊天图片 -->
    <div
      class="reply-img"
      :class="{ 'reply-img-bg': !imgFile.url }"
      v-if="imgFile"
      v-loading="imgFile && !imgFile.url"
    >
      <img v-if="imgFile.url" :src="imgFile.url" alt="" />
      <svg-icon
        class="svg-icon"
        name="icon-gb"
        v-if="imgFile.url"
        @click="removeImg"
      ></svg-icon>
    </div>
  </div>
</template>
<script>
// 消息回复弹框
import { toFixedNum } from "@/utils/common.js";
import { useStore } from "vuex";
import { useRouter } from "vue-router";
import upload from "@/components/upload.vue";
import ClickOutside from "element-plus/lib/directives/click-outside/index";
import { commentAdd } from "@/axios/community.js";
import { ElMessage } from "element-plus";
import {
  defineComponent,
  reactive,
  toRefs,
  onUnmounted,
  onMounted,
  computed,
  getCurrentInstance,
  ref,
} from "vue";
export default defineComponent({
  directives: { ClickOutside },

  components: {
    upload,
  },
  props: {
    params: {
      type: Object,
      default: () => {},
    },
    isPop: {
      type: Boolean,
      default: false,
    }, //是否弹框引用 弹框输入框会高一点
  },
  setup(props, { attrs, slots, emit }) {
    const router = useRouter();
    const { proxy } = getCurrentInstance();
    const store = useStore();

    let data = reactive({
      formData: {
        comment_content: "", //消息内容
        comment_id: "",
        comment_img_url: "",
        posts_id: "",
        reply_user_id: "",
      },
      imgFile: "", //聊天图片
      showEmoji: false,
      sendLoading: false, //发送防抖
    });

    // 表情包
    let emojiList = computed(() => {
      let emojiConfig = store.state.whichConfigData;
      if(emojiConfig && emojiConfig.emoji){
        let emoji = emojiConfig.emoji;
        let list = Object.values(emoji).flatMap((page) => page);
        return list;
      }else{
        return []
      }
    });

    // 表情包点击
    let emojiClick = (item) => {
      data.formData.comment_content += item.alt;
    };

    // 图片上传成功
    let uploadsucess = (obj) => {
      data.imgFile.url = obj.url;
      data.formData.comment_img_url = obj.url;
    };

    // 图片上传开始前
    let fileQueued = (file) => {
      let obj = {
        name: file.name,
        url: "",
      };
      data.imgFile = obj;
    };

    // 移除图片
    let removeImg = () => {
      data.imgFile = "";
    };

    // 清除表单
    let clearFormData = () => {
      for (let key in data.formData) {
        data.formData[key] = "";
      }
      data.imgFile = "";
    };

    // 用户信息
    let userInfo = computed(() => {
      return store.state.minUserInfo;
    });

    // 确定
    let confirm = () => {
      if (!userInfo.value) {
        return ElMessage.warning("请先登录");
      }

      if (!data.formData.comment_content && !data.formData.comment_img_url)
        return ElMessage.error("请输入您想说的内容!");
      let newParams = Object.assign(data.formData, props.params);
      data.sendLoading = true;
      commentAdd(newParams)
        .then((res) => {
          ElMessage.success(res.data.tip);
          emit("confirm", res.data.comment_id);
          data.sendLoading = false;
          clearFormData();
        })
        .catch((err) => {
          data.sendLoading = false;
        });
    };

    return {
      emojiClick,
      emojiList,
      removeImg,
      uploadsucess,
      fileQueued,
      close,
      confirm,
      open,
      ...toRefs(data),
    };
  },
});
</script>
<style lang="scss" scoped>
// 文本输入框
.communityCenter-post-input {
  :deep(.el-textarea__inner) {
    border: none !important;
    background: #f3f4f5;
    border-radius: 10px;
    padding: 10px !important;
    resize: none;
    padding: 0;
    box-shadow: none !important;
    min-height: 80px !important;
    max-height: 480px !important;
    color: #000;
    // &::placeholder {
    //   color: #656f79;
    // }
    &:focus {
      box-shadow: 0 0 0 1px #64c8dc inset !important;
    }
  }
}

// 帖子外层回复输入框
.communityCenter-post-input-comment {
  :deep(.el-textarea__inner) {
    background-color: #f3f4f5;
    min-height: 41px !important;
    max-height: 260px !important;
    margin-top: 6px;
  }
}

.reboundmsg-bottom {
  padding-top: 10px;
}

// 表情包/图片
.attachment-box {
  .svg-icon {
    width: 20px;
    height: 20px;
    margin-right: 16px;
    cursor: pointer;
  }

  // 表情包
  .emoji-box {
    position: relative;
    .emoji-list-box {
      position: absolute;
      min-height: 150px;
      background-color: #fff;
      border-radius: 10px;
      width: 240px;
      z-index: 3;
      border: 1px solid #f7f9fa;
      box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.1);
      padding: 5px;
      top: 30px;
    }
    .emoji-list {
      flex-wrap: wrap;
      > img {
        width: 22px;
        height: 22px;
        display: block;
        cursor: pointer;
        margin: 5px;
        border-radius: 50%;
        &:hover {
          box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.3);
        }
      }
    }
  }
}

// 底部按钮

.dialog-footer {
  font-size: 14px;
  .confirm-btn {
    height: 36px;
    width: 80px;
    border-radius: 10px;
    margin-left: 10px;
    cursor: pointer;
    border: none;
    &:active {
      opacity: 0.7;
    }
    background: linear-gradient(90deg, #9ed8e6 0%, #a1f0c0 100%);
    color: #ffffff;
  }
}

// 回复图片
.reply-img {
  width: 100px;
  height: 100px;
  border-radius: 10px;
  position: relative;
  overflow: hidden;
  margin-top: 10px;
  > img {
    width: 100px;
    height: 100px;
    object-fit: cover;
  }
  .svg-icon {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 16px;
    height: 16px;
    cursor: pointer;
  }
}
.reply-img-bg {
  background: #f3f4f5;
}
</style>
